<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mock数据(json-server)</title>
    <style>
        body{font-size: 22px;}
        td{border: 1px solid #666;}
    </style>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/handlebars/dist/handlebars.min.js"></script>
</head>
<body>
    <div id="family-container">
        正在加载...
    </div>
    <script id="family-template" type="template">
            {{#if family}}
                <table>
                    {{#each family}}
                        <tr id="person-{{userId}}">
                            <td>
                                姓名：{{name}}
                            </td>
                            <td>
                                年龄：{{age}}
                            </td>
                            <td>
                                身份证：{{identity}}
                            </td>
                            <td>
                                性别：{{gender}}
                            </td>
                        </tr>
                    {{/each}}
                </table>
            {{/if}}
        </div>
    </script>
    <script>
        /*
        需要全局安装json-server
        npm install -g json-server
        */
        var template = $('#family-template').html();
        //先编译模板
        var compiledTemplate = Handlebars.compile(template);
        $.ajax({
            url: 'http://localhost:3000/family'
        }).done(function(familyJSON){
            var familyHtml = compiledTemplate({
                family: familyJSON
            });
            $('#family-container').html(familyHtml);
        }).fail(function(){
            $('#family-container').html('出错了！');
        })
    </script>
</body>
</html>